<template>
  <el-container class="diandanallpage">
    <el-header class="diandanheader">

      <!--四个框-->
      <el-row class="diandanrow-box">
        <div style="width: 44%">
          <el-button type="primary" plain @click.prevent.stop.native="projectCategory('00')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>

              <div style="margin-top:4px; margin-bottom: 6px">过夜费</div>
            </div>
          </el-button>

          <el-button type="success" plain @click.prevent.stop.native="projectCategory('04')" style="width: 60px;height: 60px;color: green;border: none;padding:0px 0px">
            <div>
              <div style="margin-top:4px; margin-bottom: 6px">软饮</div>
            </div>
          </el-button>

          <el-button type="warning" plain @click.prevent.stop.native="projectCategory('05')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>
              <div style="margin-top:4px; margin-bottom: 6px">香烟</div>
            </div>
          </el-button>

          <el-button type="primary" plain @click.prevent.stop.native="projectCategory('06')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>

              <div style="margin-top:4px; margin-bottom: 6px">酒水</div>
            </div>
          </el-button>

          <el-button type="success" plain @click.prevent.stop.native="projectCategory('07')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>

              <div style="margin-top:4px; margin-bottom: 6px">茶水</div>
            </div>
          </el-button>

          <el-button type="warning" plain @click.prevent.stop.native="projectCategory('08')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>

              <div style="margin-top:4px; margin-bottom: 6px">食品</div>
            </div>
          </el-button>
<!--          <el-button type="primary" plain @click.prevent.stop.native="projectCategory('22')" style="width: 60px;height: 60px;border: none;padding:0px 0px">-->
<!--            <div>-->

<!--              <div style="margin-top:4px; margin-bottom: 6px">其他</div>-->
<!--            </div>-->
<!--          </el-button>-->
          <el-button type="primary" plain @click.prevent.stop.native="projectCategory('01')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>

              <div style="margin-top:4px; margin-bottom: 6px">门票</div>
            </div>
          </el-button>

        </div>

        <!--输入框、按钮-->
        <div class="shaodiandanprian">
          <el-form ref="form" label-width="100px">
            <div style="display: inline-block">
              <el-form-item label="套餐名称:">
                <el-input v-model="taocanform.packageName" placeholder=" " style="width:250px"></el-input>
              </el-form-item>
            </div>
              <el-button style="margin-left: 50px" type="primary" plain @click="sure">添 加</el-button>
              <el-button style="margin-left: 30px"  type="success" plain @click="xiadan">确 定</el-button>

          </el-form>
        </div>
      </el-row>
    </el-header>

    <el-container class="diandancontainer">
      <!--      <el-aside>-->
      <div class="diandantextout">
        <div class="diandantext1" v-loading="loading">

          <el-row class="diandanbutton-list1" v-for="rows in branchData">

            <el-col v-for="cols in rows" :span="4">
              <el-button type="primary" plain style="height: 80px;width: 120px;margin-left: 6px;margin-top: 10px;padding: 0;"
                         @click="diandan(cols)" v-show="flag==='00'">
                <div>{{ cols.projectCode }}</div>
                <div>{{ cols.entryName }}</div>
                <div>{{ cols.unitPrice }}元</div>
              </el-button>
              <el-button type="success" plain style="height: 80px;color: green;width: 120px;margin-top: 10px;padding: 0;"
                         @click="diandan(cols)" v-show="flag==='04'">
                <div>{{ cols.projectCode }}</div>
                <div>{{ cols.entryName }}</div>
                <div>{{ cols.unitPrice }}元</div>
              </el-button>
              <el-button type="warning" plain
                         style="height: 80px;width: 120px; color: darkorange;margin-top: 10px;padding: 0;"
                         @click="diandan(cols)" v-show="flag==='05'">
                <div>{{ cols.projectCode }}</div>
                <div>{{ cols.entryName }}</div>
                <div>{{ cols.unitPrice }}元</div>
              </el-button>
              <el-button type="primary" plain style="height: 80px;width: 120px;margin-top: 10px;padding: 0;"
                         @click="diandan(cols)" v-show="flag==='06'">
                <div>{{ cols.projectCode }}</div>
                <div>{{ cols.entryName }}</div>
                <div>{{ cols.unitPrice }}元</div>
              </el-button>
              <el-button type="success" plain style="height: 80px;color: green;width: 120px;margin-top: 10px;padding: 0;"
                         @click="diandan(cols)" v-show="flag==='07'">
                <div>{{ cols.projectCode }}</div>
                <div>{{ cols.entryName }}</div>
                <div>{{ cols.unitPrice }}元</div>
              </el-button>
              <el-button type="warning" plain
                         style="height: 80px;width: 120px; color: darkorange;margin-top: 10px;padding: 0;"
                         @click="diandan(cols)" v-show="flag==='08'">
                <div>{{ cols.projectCode }}</div>
                <div>{{ cols.entryName }}</div>
                <div>{{ cols.unitPrice }}元</div>
              </el-button>
              <el-button type="primary" plain style="height: 80px;width: 120px;margin-top: 10px;padding: 0;"
                         @click="diandan(cols)" v-show="flag==='22'">
                <div>{{ cols.projectCode }}</div>
                <div>{{ cols.entryName }}</div>
                <div>{{ cols.unitPrice }}元</div>
              </el-button>
              <el-button type="primary" plain style="height: 80px;width: 120px;margin-top: 10px;padding: 0;"
                         @click="diandan(cols)" v-show="flag==='01'">
                <div>{{ cols.projectCode }}</div>
                <div>{{ cols.entryName }}</div>
                <div>{{ cols.unitPrice }}元</div>
              </el-button>

            </el-col>
          </el-row>
          <!--空行，占位用，勿删-->
          <div style="height: 10px"></div>
        </div>

      </div>


      <el-container class="diandanrightbox">
        <el-main class="whdmain" style="height: 730px">
          <el-table
            empty-text = "玉泉宫"
            class="shaodiandanlisttable"
            :data="tableData"
            height="120%"
            border
            style="width: 100%; overflow-y: auto"
          >
            <el-table-column type="index" label="序号" min-width="10%" align="center">
            </el-table-column>
            <el-table-column prop="entryName" label="商品名称"  min-width="15%" align="center">
            </el-table-column>
            <el-table-column prop="unitPrice" sortable label="单价" min-width="15%" align="center">
            </el-table-column>
            <el-table-column prop="quantity" label="数量" min-width="10%" align="center">
            </el-table-column>
            <el-table-column prop="totalAmount" sortable label="金额" min-width="15%"  align="center">

            </el-table-column>
            <el-table-column  key="slot" label="操作" min-width="15%"  align="center">
              <template  #default="scope">
                <el-button type="primary" plain @click="jianshao(scope.$index)">减少</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
  // import "./App.css";
  import {listProject } from "@/api/module/shao/project";
  import {listMeal, addMeal, } from "@/api/module/shao/meal";
  import { addAssociation,} from "@/api/module/shao/association";
  export default {
    name: "App",
    components: {},
    data() {
      return {
        // 查询参数
        querydetailsParams: {
          userId: null,
          deptId: null,
          department: null,
          nickName: null,
          userName: null,
          post: null,
          handBrand: null,
          handCategory: null,
          handState: null,
          retentionStatus: null,
          mergeStatus: null,
          openingTime: null,
          drawTime: null,
          mergeHands: null,
          mergeBarBillsId: null,
          leaveTime: null,
          beforeLeave: null,
          beforeBarBillsId: null,
          entryName: null,
          projectCategory: null,
          projectCode: null,
          mnemonicCode: null,
          unit: null,
          unitPrice: null,
          commissionPrice: null,
          together: null,
          sailingsSigns: null,
          barBillsId: null,
          recordingTime: null,
          quantity: null,
          totalAmount: null,
          seat: null,
          orderNumber: null,
          paymentMethod: null,
          consumptionStatus: null,
          chargebackTime: null,
          reasonForChargeback: null,
          chargebackProcessorAccount: null,
          chargebackProcessorName: null,
          clockTime: null,
          nextClockTime: null,
          nextClockStatus: null,
          recordEmployeeNumber: null,
          recorderEmployeeName: null,
          roomType: null,
          openingHours: null,
          checkOutTime: null,
          checkOutStatus: null,
          note1: null,
          note2: null,
          note3: null,
          note4: null,
          note5: null,
          note6: null,
          note7: null,
          note8: null,
          note9: null,
          note10: null
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          entryName: null,
          projectCategory: null,
          firstLevelClassification: null,
          secondaryClassification: null,
          tertiaryClassification: null,
          projectCode: null,
          mnemonicCode: null,
          unit: null,
          unitPrice: null,
          commissionPrice: null,
          clockUpTime: null,
          note1: null,
          note2: null,
          note3: null,
          note4: null,
          note5: null,
          note6: null,
          note7: null,
          note8: null,
          note9: null,
          note10: null
        },
        // 查询参数
        guanlian: {
          pageNum: 1,
          pageSize: 10,
          setMealId: null,
          projectId: null,
          creationTime: null,
          note1: null,
          note2: null,
          note3: null,
          note4: null,
          note5: null,
          note6: null,
          note7: null,
          note8: null,
          note9: null,
          note10: null
        },
        // 表单参数
        guanlianform: {
          projectId:"",
          setMealId:""
        },
        // 表单参数
        taocan: {
          pageNum: 1,
          pageSize: 10,
          id:null,
          packageName: null,
          packageProjectcode: null,
          packageCategory: null,
          primaryClassification: null,
          twoLevelClassification: null,
          thirdLevelClassification: null,
          packageStatus: null,
          creatorName: null,
          creatorId: null,
          creatorTime: null,
          note1: null,
          note2: null,
          note3: null,
          note4: null,
          note5: null,
          note6: null,
          note7: null,
          note8: null,
          note9: null,
          note10: null
        },
        taocanform: {
          packageName:"",
        },
        // 合计
        amount: 0, // 总价格
        quantity: 0, // 总数量
        loading: false,
        flag: 0,
        goodsList: [],
        branchData: [],
        input: "",
        tableData: [],
        mealList:[],
      }
    },
    created() {
      this.queryParams.projectCategory="00";
      this.queryParams.firstLevelClassification="01";
      this.flag = "00";
      this.getList();
    },
    mounted() {
      this.getRow();
    },
    methods: {
      sure(){
        if(this.taocanform.packageName==""){
          this.$modal.msgError("未输入套餐名称");
        }else {
        this.$modal.confirm('是否添加该套餐？').then(function () {
        }).then(() => {
      addMeal(this.taocanform).then(response => {
        listMeal(this.taocanform).then(response => {
          this.mealList = response.rows;
          console.log(this.mealList)
        });
      });

        });}
      },
      updateTime() {
        console.log("随便玩玩")
      },
      handleClick(index) {
        const entryName = index;
        console.log(index)
        this.$prompt('请修改金额', '系统信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.tableData[index].unitPrice=value;
          this.tableData[index].totalAmount=this.tableData[index].unitPrice*this.tableData[index].quantity
          this.quantity=0;
          this.amount=0;
          for (let i = 0; i < this.tableData.length; i++) {
            console.log(this.tableData.length)
            this.quantity +=parseInt(this.tableData[i].quantity)
            this.amount +=parseInt(this.tableData[i].totalAmount)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          });
        });
        // 处理 entryName ...
      },
      //返回方法
      back(){
        this.$router.push({path: '/batai/bartai'});
      },
      /** 商品分类 */
      projectCategory(category) {
        if(category==="00"){
          this.queryParams.firstLevelClassification="01";
        }else{
          this.queryParams.firstLevelClassification=null;
        }
        this.queryParams.projectCategory = category;
        this.flag = category;
        this.getList();
      },
      cancel(){
        this.tableData=[];
        this.quantity=0;
        this.amount=0;
      },
      /** 查询项目信息列表 */
      getList() {
        this.loading = true;
        listProject(this.queryParams).then(response => {
          this.goodsList = response.rows;
          this.getRow();
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 点单操作 */
      diandan(project) {
            if(this.tableData.length===0){
              this.tableData.push({
                handBrand:this.taocanform.handBrand,
                id:project.id,
                projectCode:project.projectCode,
                entryName:project.entryName,
                quantity:1,
                unitPrice:project.unitPrice,
                mnemonicCode:project.mnemonicCode,
                totalAmount:project.unitPrice,
              })
              this.quantity=0;
              this.amount=0;
              for (let i = 0; i < this.tableData.length; i++) {
                console.log(this.tableData.length)
                this.quantity +=parseInt(this.tableData[i].quantity)
                this.amount +=parseInt(this.tableData[i].totalAmount)

              }
            }else{
              for(let i = 0; i < this.tableData.length; i++){
                if(this.tableData[i].entryName === project.entryName){
                  this.tableData[i].quantity= parseFloat(this.tableData[i].quantity)+1
                  this.tableData[i].totalAmount=this.tableData[i].quantity*project.unitPrice
                  break
                }
                else{
                  if(i===this.tableData.length-1){
                    this.tableData.push({
                      handBrand:this.taocanform.handBrand,
                      id:project.id,
                      projectCode:project.projectCode,
                      entryName:project.entryName,
                      quantity:1,
                      unitPrice:project.unitPrice,
                      mnemonicCode:project.mnemonicCode,
                      totalAmount:project.unitPrice,
                    })
                    i++
                  }

                }
              }
              this.quantity=0;
              this.amount=0;
              for (let i = 0; i < this.tableData.length; i++) {
                console.log(this.tableData.length)
                this.quantity +=parseInt(this.tableData[i].quantity)
                this.amount +=parseInt(this.tableData[i].totalAmount)
              }
            }
      },
      //减少商品数量
      jianshao(index){
        console.log("111")
        console.log(this.tableData[index])
        this.tableData[index].quantity-=1;
        this.tableData[index].totalAmount=this.tableData[index].unitPrice*this.tableData[index].quantity
        if(this.tableData[index].quantity==0){
          this.tableData.splice(index,1);
        }
        this.quantity=0;
        this.amount=0;
        for (let i = 0; i < this.tableData.length; i++) {
          console.log(this.tableData.length)
          this.quantity +=parseInt(this.tableData[i].quantity)
          this.amount +=parseInt(this.tableData[i].totalAmount)

        }
      },
      xiadan(){
        if(this.taocanform.packageName==""){
          this.$modal.msgError("未输入套餐名称");
        }else if(this.tableData.length<2){
          this.$modal.msgError("套餐内容种类个数必须大于2");
        }else {
          this.$modal.confirm('是否确认添加套餐内容？').then(function () {
          }).then(() => {
            for (var i = 0; i < this.tableData.length; i++) {
              this.guanlianform.projectId = this.tableData[i].id
              this.guanlianform.setMealId = this.mealList[0].packageProjectcode
              addAssociation(this.guanlianform).then(response => {
              });
            }
            this.$modal.msgSuccess("添加套餐内容成功");
            //重置已点商品表单
            this.taocanform.totalAmount = "";
            this.tableData = [];
            this.quantity = 0;
            this.amount = 0;
            //重置手牌表单
            this.taocanform.packageName = "";
          });
        }
      },
      getRow() {
        let arr = [];
        let row = Math.ceil(this.goodsList.length / 6);
        //  行循环
        for (let i = 0; i < row; i++) {
          //  第i行的商品
          arr[i] = [];
          // modLast：最后一行的商品个数
          let modLast = this.goodsList.length % 6 === 0 ? 6 : this.goodsList.length % 6;
          // lastRow：判断当前循环是不是最后一行，是就让内层循环最后一行的商品个数，不是则默认5个
          let lastRow = i === (row - 1) ? modLast : 6;
          //  列循环
          for (let j = 0; j < lastRow; j++) {
            arr[i][j] = this.goodsList[6 * i + j];
          }
        }

        //  最后得到arr数组，将数组赋值给一个变量
        this.branchData = arr;
      },
      //指定列求和
      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];
        //第一列命名合计
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          console.log(column.property)

          //指定allCompanyNum、allCarNum、allDriverNum不求和，其余列军求和
          if (column.property !== 'visitorId' && column.property !== 'tableNumber' && column.property !== 'entryName' && column.property !== 'projectCategory'
            && column.property !== 'projectCode' && column.property !== 'mnemonicCode' && column.property !== 'unit'
            && column.property !== 'unitPrice') {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index];
          } else {
            sums[index] = ''
          }
        });
        let jine=sums[sums.length-1];
        sums[sums.length-1]=Math.round(jine*100)/100
        return sums
      },
      onChange(input) {
        this.input = input;
      },
      onKeyPress(button) {
        console.log("button", button);
      },
      onInputChange(input) {
        this.input = input.target.value;
      }

    }
  }
</script>

<style lang="scss" scoped>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .diandancontainer{
    margin-top: 20px;
  }
  .diandanheader{
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 5px;
    background-color: #FFFFFF;
  }
  /*.input {
    !*margin-top: 5px;*!
    margin-left: 10px;
    margin-right: 5px;
    width: 533px;
    height: 30px;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    border-radius: 4px;
    border-color: #FFFFFF;
    !*box-sizing: border-box;*!
    border-width: 1px;
  }*/
  .el-aside {
    background-color: #E9EEF3;
    min-width: 55%;
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: inherit;
  }
  .whdmain{
    overflow-y: hidden;
    height: 730px;
    background-color: #FFFFFF;
    color: #333;
    width: 100%;
    margin-right: 5px;
    margin-top: 10px;
    margin-left: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: inherit;
  }

  .el-aside, .el-main {
    height: 765px;
    margin-bottom: 0px;
  }
  .diandantext2 {
    height: 230px;
    width: 552px;
    border-radius: 4px;
    margin-bottom: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: inherit;
  }

  .text3 {
    height: 155px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 4px;
    position: inherit;

  }

  .iconstyle {
    margin-top: 5px;
  }

  .position-fixed {
    position: inherit;
    margin-bottom: 5px;
    margin-top: 10px;
  }
  .divide {
    margin-top: 4px;
    margin-bottom: 10px;
  }
  .button-list2 {
    margin-top: 5px;
    text-align: center;
    margin-bottom: 5px;

  }
  .diandanallpage {
    /*position: fixed;*/
    margin-left: 5px;
    margin-right: 10px;
    height: 840px;
  }

  .diandanrow-box {
    display: flex;
    filex-wrap: wrap;
  }

  .shaodiandanprian {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .diandananniu {
    margin-left: 40px;
    display: inline-block;
    position: relative;
  }

  .diandantext1 {
    margin-top: 10px;
    height: 730px;
    padding-right: 2%;
    width: 830px;
    border-radius: 4px;
    margin-bottom: 5px;
    background-color: white;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .diandanrightbox {

    width: 100px;
  }



  .shaodiandanlisttable {
    overflow-y: auto;
    overflow-x: hidden;
    position: inherit;
    border: #DFE6EC 1px solid;
  }



  .diandanbutton-list1 {
    text-align: center;
  }

  .button1 {
    background-color: #ebd4ef;
    border: #9c26b0;
  }
  .button5 {
    background-color: darksalmon;
    border: #9c26b0;
  }
  //不影响全局，使用样式穿透
  ::v-deep .el-table__body-wrapper {
    // 整个滚动条
    &::-webkit-scrollbar {
      width: 0px; // 纵向滚动条的宽度
      background: rgba(213, 215, 220, 0.3);
      border: none;
    }
    // 滚动条轨道
    &::-webkit-scrollbar-track {
      border: none;
    }
  }
  // --------------------隐藏table gutter列和内容区右侧的空白 start
  ::v-deep .diandanlisttable th.gutter {
    display: none;
    width: 0
  }
  ::v-deep .diandanlisttable colgroup col[name='gutter'] {
    display: none;
    width: 0;
  }
  // 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
  ::v-deep .el-table__body {
    width: 100% !important;
  }
  ::-webkit-scrollbar{
    width: 0px !important;
    height: 0px !important;
    border: none;
  }
  ::-webkit-scrollbar-track{
    width: 0!important;height: 0;
    border: none;
  }

  /*::-webkit-scrollbar {
    width: 0 !important;
    !*height: 0;*!
  }*/

</style>

